<template>
  <view class="component-box" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="notice-box">
      <view v-if="styleType == 2" class="notice-icon-box">
        <i class="iconfont icon-sound-filling"></i>
      </view>
      <view v-else class="notice-img">
        <image
          v-if="propsData.params.noticeImg && styleType == 3"
          :src="propsData.params.noticeImg"
          lazy-load
          alt=""
          mode="widthFix"
        />
        <image
          class="default-img"
          lazy-load
          v-if="styleType == 1"
          :src="asyncImgs.diyNew.diy_notice_img"
          mode="widthFix"
        />
      </view>
      <view class="split-line"></view>
      <view class="notice-bar" :class="styleType == 2 ? 'width-bigger' : ''">
        <u-notice-bar
          mode="horizontal"
          type="none"
          color="#262626"
          :volume-icon="false"
          :list="noticeBarList"
          @click="handleNoticeBar"
        ></u-notice-bar>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mixins: [diyMixin], //混入文件
  data() {
    return {
      list: [],
    };
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    noticeBarList() {
      return [this.propsData.params.noticeText];
    },
  },
  methods: {
    handleNoticeBar(e) {
      uni.showModal({
        title: "",
        content: this.propsData.params.noticeText,
        showCancel: false,
        confirmText: this.$t("common.confirm"),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .notice-box {
    width: 100%;
    height: 11.73vw;
    display: flex;
    align-items: center;
    padding: 0 2.67vw;
    .notice-img {
      width: 20.26vw;
      // height: 5.34vw;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 100%;
        // height: 100%;
      }
    }
    .notice-icon-box {
      .iconfont {
        font-size: 44rpx;
      }
    }
    .notice-bar {
      width: 67.2vw;
    }
    .width-bigger {
      width: 77vw;
    }
    .split-line {
      width: 1px;
      height: 4.26vw;
      background-color: #ebebeb;
      margin: 0 0 0 2.67vw;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
